/* variables */
:root {
 --card-bg: rgba(11,18,32,0.8);
 --accent: #ffffff;
 --muted: #94a3b8;
 --radius: 14px;
 --black-45: black;
 --pd-15: 15px;
 --color-bg:  #f0f2f5;
}
/* =========================
        RESET GENERAL
========================= */
* {
 margin:0;
 padding:0;
 box-sizing:border-box;
}
/* =========================
            CUERPO
========================= */
body{
 font-family: arial, sans-serif;
 line-height: 1.6;
 background:var(--color-bg);
}

.menu-escritorio .btn-contenidos,
.menu-movil .btn-contenidos {
    display: none;
}

/* galeria (grid) */
.gallery{
    width:90%;
    margin:30px auto 40px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:22px
}
/* targeta */
.card{
    background:var(--card-bg);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,0.5);
    transition:transform .22s ease,box-shadow .22s ease;
}
/* hover */
.card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 46px rgba(0,0,0,0.6);
}
/* imagen */
.card img{
    width:100%;
    height:160px;
    object-fit:cover;
    display:block;
}
/* contenido */
.card-content{padding:14px;}
.card-content h3{color:var(--accent);margin-bottom:6px}
.card-content p{color:var(--muted);font-size:14px;}

.card-content a{
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.3s;
    margin-left: 15px;
    padding: 8px 12px;
    font-size: 18px;
}

.card-content a:hover{

    background: black;

    color: white;

    box-shadow:
        0 0 4px rgba(255,255,255,0.3),
        0 0 8px rgba(255,255,255,0.2);

    text-shadow:
        0 0 3px rgba(255,255,255,0.4);

}

/* ===================================
     agrupacion por categorias
=================================== */
/* ocultar inputs (pero mantenerlos en DOM) */
.filter-input{
    position: absolute;
    left:-9999px;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
}

/* filtro visibles (labels) */
.filter{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
    padding:12px 20px;
    margin-top: 20px;
    margin-bottom:10px;
}

.menu-categorias{
    display:none;
}

.filtros-escritorio{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
}

.chip{
    padding:8px 14px;
    border-radius:999px;
    background:#0b1220;
    cursor:pointer;
    font-size:14px;
    color:#fff;
    transition:all .18s ease;
}
/* estilo del label cuando su input esta seleccionado */
/* nota: usamos selectores del tipo #id:checked ~ .filters label[for="id"] */
#filter-all:checked ~ .filter label[for="filter-all"],
#filter-1:checked ~ .filter label[for="filter-1"],
#filter-2:checked ~ .filter label[for="filter-2"],
#filter-3:checked ~ .filter label[for="filter-3"],
#filter-4:checked ~ .filter label[for="filter-4"],
#filter-5:checked ~ .filter label[for="filter-5"],
#filter-6:checked ~ .filter label[for="filter-6"],
#filter-7:checked ~ .filter label[for="filter-7"],
#filter-8:checked ~ .filter label[for="filter-8"] {
    background:#fff;
    color:#0b1220;

    box-shadow:
        0 0 5px rgba(255,255,255,.4),
        0 0 10px rgba(255,255,255,.2);
}

/* FILTRADO CSS (mostrar/ocultar según radio seleccionado) */
/* Por defecto (Todas): no hacemos nada (todos visibles) */

/* Cuando se selecciona una categoría: esconder todas y mostrar solo las que coinciden */
#filter-1:checked ~ .gallery .card { display:none; }
#filter-1:checked ~ .gallery .card.cat-1 { display:block; }

#filter-2:checked ~ .gallery .card { display:none; }
#filter-2:checked ~ .gallery .card.cat-2 { display:block; }

#filter-3:checked ~ .gallery .card { display:none; }
#filter-3:checked ~ .gallery .card.cat-3 { display:block; }

#filter-4:checked ~ .gallery .card { display:none; }
#filter-4:checked ~ .gallery .card.cat-4 { display:block; }

#filter-5:checked ~ .gallery .card { display:none; }
#filter-5:checked ~ .gallery .card.cat-5 { display:block; }

#filter-6:checked ~ .gallery .card { display:none; }
#filter-6:checked ~ .gallery .card.cat-6 { display:block; }

#filter-7:checked ~ .gallery .card { display:none; }
#filter-7:checked ~ .gallery .card.cat-7 { display:block; }

#filter-8:checked ~ .gallery .card { display:none; }
#filter-8:checked ~ .gallery .card.cat-8 { display:block; }
/* nota: #filter-all está por defecto checked -> muestra todo */

/* ===================================
             RESPONSIVE
=================================== */

@media (max-width: 768px) {

 body{
 padding:10px;
}

/* =========================
   MENÚ DE CATEGORÍAS MÓVIL
========================= */

.filtros-escritorio{
    display:none;
}

.menu-categorias{
    display:block;
    position:relative;
}

/* BOTÓN CIRCULAR */
.menu-categorias summary{
    list-style:none;
    width:45px;
    height:45px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#0b1220;
    color:#fff;

    font-size:22px;
    cursor:pointer;

    box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* quitar flecha */
.menu-categorias summary::-webkit-details-marker{
    display:none;
}

/* LISTA */
.lista-categorias{
    position:absolute;
    top:55px;
    right:0;

    width:190px;

    background:#fff;
    padding:8px;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.25);

    z-index:100;
}

/* BOTONES DE LA LISTA */
.lista-categorias .chip{
    display:block;
    width:100%;

    margin:3px 0;

    padding:9px 12px;

    border-radius:8px;

    background:#0b1220;
    color:#fff;

    font-size:13px;
    text-align:left;
}

/* CATEGORÍA SELECCIONADA */
#filter-all:checked ~ .filter .menu-categorias label[for="filter-all"],
#filter-1:checked ~ .filter .menu-categorias label[for="filter-1"],
#filter-2:checked ~ .filter .menu-categorias label[for="filter-2"],
#filter-3:checked ~ .filter .menu-categorias label[for="filter-3"],
#filter-4:checked ~ .filter .menu-categorias label[for="filter-4"],
#filter-5:checked ~ .filter .menu-categorias label[for="filter-5"],
#filter-6:checked ~ .filter .menu-categorias label[for="filter-6"],
#filter-7:checked ~ .filter .menu-categorias label[for="filter-7"],
#filter-8:checked ~ .filter .menu-categorias label[for="filter-8"]{

    background:#fff;
    color:#0b1220;

    box-shadow:
        0 0 5px rgba(255,255,255,.4),
        0 0 10px rgba(255,255,255,.2);
}
  
}